<template>
  <div class="manager">
    <div class="tableConter">
      <h1>学情统计</h1>

      <el-table class="tableBox" :data="tableData1" v-loading="loading1">
        <el-table-column label="老师姓名" width="120">
          <template #default="scope">
            <span
              @click="toDetail1(scope.row)"
              class="active"
              :title="scope.row.name"
            >
              {{ scope.row.name }}
            </span>
          </template>
        </el-table-column>

        <!-- <el-table-column label="关系" prop="relation"> </el-table-column>
        <el-table-column label="联系电话" prop="student_phone" width="170">
        </el-table-column> -->
        <el-table-column label="所带班级" class-name="classes" width="240">
          <template #default="scope">
            <span>
              {{ scope.row.className }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="学生人数" prop="studentCount">
        </el-table-column>
        <!-- <el-table-column label="老师" width="150" class-name="teachers">
          <template #default="scope">
            <span v-for="(item, idx) in scope.row.student_teachers" :key="idx">
              {{ item }}
            </span>
          </template>
        </el-table-column> -->
        <el-table-column label="上周平均完成情况" width="120">
          <template #default="scope">
            <span>
              {{ scope.row.pre_book_done_num }} /
              {{ scope.row.pre_book_all_num }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="上周最高得分" prop="pre_max_score" width="120">
        </el-table-column>
        <el-table-column label="上周平均得分" prop="pre_avg_score" width="120">
        </el-table-column>
        <el-table-column label="本周平均完成情况" width="120">
          <template #default="scope">
            <span>
              {{ scope.row.now_book_done_num }} /
              {{ scope.row.now_book_all_num }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="本周最高得分" prop="now_max_score" width="120">
        </el-table-column>
        <el-table-column label="本周平均得分" prop="now_avg_score" width="120">
        </el-table-column>
      </el-table>
      <el-pagination
        background
        class="laypage"
        v-model:page-size="pageSize1"
        layout="prev, pager, next, total,slot"
        :total="Number(tableCount1)"
        v-model:currentPage="currentPage1"
        @current-change="pageChange1"
        @prev-click="pageChange1"
        @next-click="pageChange1"
      />

      <h1>积分详情</h1>

      <el-table class="tableBox" :data="tableData2" v-loading="loading2">
        <el-table-column label="学员姓名" width="140">
          <template #default="scope">
            <span
              @click="toDetail2(scope.row)"
              class="active"
              :title="scope.row.name"
            >
              {{ scope.row.name }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="所带班级" class-name="classes" width="240">
          <template #default="scope">
            <span>
              {{ scope.row.className }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="学生人数" prop="studentCount">
        </el-table-column>
        <!-- <el-table-column label="性别" prop="student_sex"> </el-table-column>

        <el-table-column label="关系" prop="relation"> </el-table-column>
        <el-table-column label="联系电话" prop="student_phone" width="170">
        </el-table-column>
        <el-table-column label="班级" class-name="classes" width="240">
          <template #default="scope">
            <span v-for="(item, idx) in scope.row.student_classes" :key="idx">
              {{ item }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="老师" width="150" class-name="teachers">
          <template #default="scope">
            <span v-for="(item, idx) in scope.row.student_teachers" :key="idx">
              {{ item }}
            </span>
          </template>
        </el-table-column> -->

        <el-table-column label="平均累计积分" prop="sumLeiji">
          <template #default="scope">
            <span>
              {{ Number(scope.row.sumLeiji).toFixed(2) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="平均剩余积分" prop="sumShengyu">
          <template #default="scope">
            <span>
              {{ Number(scope.row.sumShengyu).toFixed(2) }}
            </span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" :width="'180'">
          <template #default="scope">
            <el-button type="text" @click="operate(scope.row, 1)"
              >增加积分</el-button
            >
            <el-button
              type="text"
              @click="operate(scope.row, 2)"
              :disabled="scope.row.balance <= 0"
              >扣除积分</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination
        background
        class="laypage"
        v-model:page-size="pageSize2"
        layout="prev, pager, next, total,slot"
        :total="Number(tableCount2)"
        v-model:currentPage="currentPage2"
        @current-change="pageChange2"
        @prev-click="pageChange2"
        @next-click="pageChange2"
      />
      <h1>转介绍统计</h1>
      <el-table class="tableBox" :data="tableData3" v-loading="loading3">
        <el-table-column label="老师姓名" width="140">
          <template #default="scope">
            <span
              @click="toDetail3(scope.row)"
              class="active"
              :title="scope.row.name"
            >
              {{ scope.row.name }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="所带班级" class-name="classes" width="240">
          <template #default="scope">
            <span>
              {{ scope.row.className }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="学生人数" prop="studentCount">
        </el-table-column>
        <el-table-column
          label="带入转介绍的leads数"
          prop="beingInvitaionsCount"
        >
        </el-table-column>
        <el-table-column label="有带入的学生数" prop="invitationsCount">
        </el-table-column>
      </el-table>
      <el-pagination
        background
        class="laypage"
        v-model:page-size="pageSize3"
        layout="prev, pager, next, total,slot"
        :total="Number(tableCount3)"
        v-model:currentPage="currentPage3"
        @current-change="pageChange3"
        @prev-click="pageChange3"
        @next-click="pageChange3"
      />
    </div>
  </div>
</template>
  
  <script>
import { toRefs, getCurrentInstance, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
export default {
  name: "Manager",
  setup() {
    const proxy = getCurrentInstance().appContext.config.globalProperties;
    const router = useRouter();

    let dataObj = reactive({
      currentPage1: 1, //当前页码
      loading1: false, //是否loading
      tableCount1: null, //table总数
      pageSize1: 10, //一页展示几个
      tableData1: [], //表单数据
      tableData2: [], //表单数据
      currentPage2: 1, //当前页码
      loading2: false, //是否loading
      tableCount2: null, //table总数
      pageSize2: 10, //一页展示几个
      currentPage3: 1,
      loading3: false,
      tableCount3: null,
      pageSize3: 10,
      tableData3: [], //表单数据
    });
    let assignmentData1 = () => {
      dataObj.loading1 = true;
      proxy.$https
        .get("/api/v1/manage_view/learns", {
          // level_type: dataObj.radio,
          page: dataObj.currentPage1,
          pageSize: 10,
        })
        .then((res) => {
          dataObj.loading1 = false;
          if (!res.code) {
            dataObj.tableData1 = res.data.data ? res.data.data : [];
            dataObj.tableCount1 = res.data.total;
          } else {
            dataObj.tableData1 = [];
            dataObj.tableCount1 = 0;
          }
        })
        .catch(() => {
          dataObj.tableData1 = [];
          dataObj.tableCount1 = 0;
          dataObj.loading1 = false;
        });
    };
    let assignmentData2 = () => {
      dataObj.loading2 = true;
      proxy.$https
        .get("/api/v1/manage_view/summary", {
          page: dataObj.currentPage2,
        })
        .then((res) => {
          dataObj.loading2 = false;
          if (!res.code) {
            dataObj.tableData2 = res.data.data ? res.data.data : [];
            dataObj.tableCount2 = res.data.total;
          } else {
            dataObj.tableData2 = [];
            dataObj.tableCount2 = 0;
          }
        })
        .catch(() => {
          dataObj.tableData2 = [];
          dataObj.tableCount2 = 0;
          dataObj.loading2 = false;
        });
    };
    let assignmentData3 = () => {
      dataObj.loading3 = true;
      let parmes = {
        // phone: dataObj.filterData.phone,
        // teacher_id: dataObj.filterData.teacher_id,
        // create_time_s: dataObj.filterData.endDate
        //   ? dataObj.filterData.endDate[0]
        //   : null,
        // create_time_e: dataObj.filterData.endDate
        //   ? dataObj.filterData.endDate[1]
        //   : null,
        page: dataObj.currentPage3,
      };
      proxy.$https
        .get("/api/v1/manage_view/invitations", parmes)
        .then((res) => {
          dataObj.loading3 = false;
          if (!res.code) {
            dataObj.tableData3 = res.data.data ? res.data.data : [];
            dataObj.tableCount3 = res.data.total;
          } else {
            dataObj.tableData3 = [];
            dataObj.tableCount3 = 0;
          }
        })
        .catch(() => {
          dataObj.tableData3 = [];
          dataObj.tableCount3 = 0;
          dataObj.loading3 = false;
        });
    };
    let toDetail1 = (obj) => {
      router.push({
        path: `/learningCondition`,
        query: { teacher_id: obj.employee_id },
      });
      //   dataObj.user_id = obj.user_id;
      //   dataObj.gridData = [];
      //   dataObj.activeName = "学情";
      //   getWeeksList();
      //   getGridData();
      //   dataObj.dialogTableVisible = true;
    };
    let toDetail2 = (obj) => {
      router.push({
        path: `/integralDetails`,
        query: { teacher_id: obj.employee_id },
      });
      //   dataObj.user_id = obj.user_id;
      //   dataObj.gridData = [];
      //   dataObj.activeName = "学情";
      //   getWeeksList();
      //   getGridData();
      //   dataObj.dialogTableVisible = true;
    };
    let toDetail3 = (obj) => {
      router.push({ path: `/leads`, query: { teacher_id: obj.employee_id } });

      //   dataObj.user_id = obj.user_id;
      //   dataObj.gridData = [];
      //   dataObj.activeName = "学情";
      //   getWeeksList();
      //   getGridData();
      //   dataObj.dialogTableVisible = true;
    };
    let pageChange1 = () => {
      assignmentData1();
    };
    let pageChange2 = (index) => {
      assignmentData2();
    };
    let pageChange3 = (index) => {
      dataObj.currentPage3 = index;
      assignmentData3();
    };
    assignmentData1();
    assignmentData2();
    assignmentData3();
    return {
      ...toRefs(dataObj),
      //   pageChange: pageChange,
      //   operate: operate,
      toDetail1: toDetail1,
      toDetail2: toDetail2,
      toDetail3: toDetail3,
      pageChange1: pageChange1,
      pageChange2: pageChange2,
      pageChange3: pageChange3,
      //   cancel: cancel,
      //   sure: sure,
      //   formRef: formRef,
      //   handleClose: handleClose,
      //   scoreChange: scoreChange,
      //   tableClose: tableClose,
      //   weekChange: weekChange,
      //   pageChange1: pageChange1,
    };
  },
};
</script>
  <style scoped lang="scss">
.manager {
  width: 100%;
  height: 100%;
  background: #f7f9fa;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: scroll;
  .tableConter {
    clear: both;
    height: auto;
    background: #ffffff;
    padding: 20px 24px;
    h1 {
      color: #606266;
      font-size: 18px;
      font-weight: normal;
    }
    .active {
      color: #88a3f1;
      cursor: pointer;
    }
  }
}
</style>
  <style  lang="scss">
</style>